{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">技能要求词云可视化</h1>
</div>

<div class="card mb-4">
    <div class="card-body">
        <h5 class="card-title">选择职位类型</h5>
        <div class="btn-group" role="group">
            <a href="{{ url_for('page3', position_type='数据分析') }}" 
               class="btn {% if position_type == '数据分析' %}btn-primary{% else %}btn-outline-primary{% endif %}">
                数据分析
            </a>
            <a href="{{ url_for('page3', position_type='BI开发工程师') }}" 
               class="btn {% if position_type == 'BI开发工程师' %}btn-primary{% else %}btn-outline-primary{% endif %}">
                BI开发工程师
            </a>
            <a href="{{ url_for('page3', position_type='游戏测试') }}" 
               class="btn {% if position_type == '游戏测试' %}btn-primary{% else %}btn-outline-primary{% endif %}">
                游戏测试
            </a>
        </div>
    </div>
</div>

{% if wordcloud_url %}
<div class="card">
    <div class="card-body">
        <h5 class="card-title">{{ position_type }}技能要求词云</h5>
        <img src="data:image/png;base64,{{ wordcloud_url }}" class="img-fluid" alt="技能词云">
    </div>
</div>
{% else %}
<div class="alert alert-warning">
    暂无 {{ position_type }} 职位的技能数据
</div>
{% endif %}
{% endblock %}